<template>
  <div>
    <el-page-header @back="goBack">
    </el-page-header>
    <!-- 高级查询 -->
    <div v-show="active == 1">
      <el-form :inline="true" :model="searchSubcontract" class="demo-form-inline">
        
        <el-form-item >
          <el-input
            v-model="searchSubcontract.startPrice"
            placeholder="合同金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="-">
          <el-input
            v-model="searchSubcontract.entPrice"
            placeholder="合同金额"
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-input
            v-model="searchSubcontract.id"
            placeholder="合同编号"
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-input
            v-model="searchSubcontract.conreactName"
            placeholder="合同名称"
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-input
            v-model="searchSubcontract.projectName"
            placeholder="项目名称"
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-input
            v-model="searchSubcontract.providerName"
            placeholder="分包单位"
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-input
            v-model="searchSubcontract.name"
            placeholder="签订人"
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-input
            v-model="searchSubcontract.startDate"
            placeholder="起始日期"
            type="date"
          ></el-input>
        </el-form-item>
        <el-form-item label="-">
          <el-input
            v-model="searchSubcontract.endDate"
            placeholder="结束日期"
            type="date"
          ></el-input>
        </el-form-item>
        <el-form-item>
                <el-select v-model="searchSubcontract.approveStatus" >
                    <el-option label="请选择审批状态" value=""></el-option>
                    <el-option label="审批中" value="1"></el-option>
                    <el-option label="审批不通过" value="2"></el-option>
                    <el-option label="审批通过" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 10px">
                <el-button @click="getSubcontracts" type="primary">检索</el-button>
            </el-form-item>
      </el-form>

      <!-- 查询所有用户信息 -->
      <el-table :data="subcontracts.slice((currentPage-1)*pagesize,currentPage*pagesize)"
       border style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
        <el-table-column prop="id" label="合同编号" width="180">
        </el-table-column>
        <el-table-column prop="contractName" label="合同名称"> </el-table-column>
        <el-table-column prop="contractAmount" label="合同金额"> </el-table-column>
        <el-table-column prop="providerName" label="分包单位"> </el-table-column>
        <el-table-column prop="projectName" label="项目名称"> </el-table-column>
        <el-table-column prop="name" label="签订人" > </el-table-column>
        <el-table-column prop="createDate" label="日期"> </el-table-column>
        <el-table-column prop="approveStatus" label="流程状态">
          <template slot-scope="scope">
                    <span style="color: orange;font-weight: 700" v-if="scope.row.approveStatus=='1'">审批中</span>
                    <span style="color: red;font-weight: 700" v-if="scope.row.approveStatus=='2'">审批不通过</span>
                    <span style="color: green;font-weight: 700" v-if="scope.row.approveStatus=='3'">审批通过</span>
                </template>
          </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-dropdown split-button type="primary" @command="handleCommand">
              操作
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="scope.row.i+ '-删除'"
                  >查看</el-dropdown-item
                >
                <el-dropdown-item :command="scope.row.i+ '-修改'"
                  >修改</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
     <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 10, 20, 40]" 
                            :page-size="pagesize"         
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="subcontracts.length">    
                    </el-pagination>
    </div>

    <subcontract-update v-if="active==2" v-bind:subcontract="subcontract" v-bind:quantitiesList="quantitiesList" 
    @updateSubcontractTo="updateSubcontract" ></subcontract-update>

  </div>
</template>

<script>
import SubcontractModel from '../../model/wyh/subcontractModel.js'
const em=new  SubcontractModel()
import SubcontractUpdate from '../wyh/SubcontractUpdate.vue'
export default {
  name: "laborSubcontract",
  components: {SubcontractUpdate},
    data() {
      return {
        active:1,
        subcontracts:[],//所有查询数据
      searchSubcontract:{},//高级查询数据
      currentPage:1, //初始页
      pagesize:5,    //每页的数据
      subcontract:{},//修改的分包合同数据
      quantitiesList:[],//修改的明细数据
      }
    },
    methods:{
      goBack(){
        this.active=1
      },
      getSubcontracts(){
        em.getSubcontracts(this.searchSubcontract).then((Response)=>{
          this.subcontracts=Response.data.data
        })
      },
      // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
        handleCommand(command) {//下拉框操作判断
      if (command.split("-")[1] == "删除") {//查看操作
        console.log(command.split("-")[0]);
        var i = command.split("-")[0];
        em.deleteByIdSubcontract(i).then(() => {//删除
        this.getSubcontracts()
        });
      }
      if(command.split("-")[1] == "修改"){
        var id=command.split("-")[0];
        em.getByIdSubcontract(id).then((response)=>{
            this.subcontract=response.data.data.laborSubcontract;
            this.quantitiesList=response.data.data.quantitiesList;
            this.active++
        })
      }
    },
    updateSubcontract(a){
      em.updateSubcontract(a).then(()=>{
        this.active=1
          this.getSubcontracts()
        })
    }
    },
    created(){
      this.getSubcontracts()
    }
}
</script>

<style>

</style>